;(function(){
  var DragFun = function(elem){
    var elem = document.getElementById(elem)
    var self = this
    // 鼠标按下，开始准备移动
    elem.onmousedown = function(e){
      var e = e || window.event
      // 获取鼠标内部距离elem左侧和上部的距离
      // 用鼠标所在的x坐标减去elem所在的位置的左侧宽度，就是鼠标在elem内部距离左侧边框的宽度
      var x = self.pagePos(e).x - parseInt(self.getStyles(elem,'left'))
      var y = self.pagePos(e).y - parseInt(self.getStyles(elem,'top'))
      // 按住鼠标并且移动
      document.onmousemove = function(e){
        var e = e || window.event
        var locationX = self.pagePos(e).x - x
        var locationY = self.pagePos(e).y - y

        // 计算可移动位置的大小， 保证元素不会超过可移动范围
        var width = document.documentElement.clientWidth - elem.offsetWidth
        var height = document.documentElement.clientHeight - elem.offsetHeight

        // min方法保证不会超过右边界，max保证不会超过左边界
        locationX = Math.min(Math.max(0, locationX), width)
        locationY = Math.min(Math.max(0, locationY), height)

        elem.style.left = locationX + 'px'
        elem.style.top = locationY + 'px'
        // 控制边界 不要溢出
      }
      // 鼠标抬起，清除移动事件
      // 为什么要在docuemnt上添加事件 避免因为鼠标移动过快，一旦移除elem，那就不会触发抬起事件
      document.onmouseup = function(e){
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
  // 获取滚动条的距离
  DragFun.prototype.getScrollOffset = function(){
    if(window.pageXOffset){  // 常规用法
      return {
        "left": window.pageXOffset,
        "top": window.pageYOffset
      }
    }else{  // 如果是ie9的部分版本和ie8以及一下，不支持上面的写法
      return {
        "left": document.body.scrollLeft + document.documentElement.scrollLeft,
        "top": document.body.scrollTop + document.documentElement.scrollTop
      }
    }
  }

  DragFun.prototype.pagePos = function(e){  // 做好兼容的获取pagex和pagey
    var sLeft = this.getScrollOffset().left
    var sTop = this.getScrollOffset().top
    // 加上文档偏移
    var cLeft = document.documentElement.clientLeft || 0
    var cTop = document.documentElement.clientTop  || 0
    return {
      x: e.clientX + sLeft - cLeft,
      y: e.clientY + sTop - cTop
    }
  }

  // 查看可是区域的宽高
  // 通过判断兼容模式封装方法
  DragFun.prototype.getViewportSize = function(){
    if(window.innerWidth){
      return {
        width: window.innerWidth,  // 包括滚动条
        height: window.innerHeight
      }
    }else{
      if(document.compatMode === 'BackCompat'){  // 怪异模式   顶部没有<!DOCTYPE html> ，就是怪异模式
        return {
          width: document.body.clientWidth,  // 包括滚动条
          height: document.body.clientHeight
        }
      }else{
        return {
          width: document.documentElement.clientWidth,  // 不包括滚动条
          height:document.documentElement.clientHeight
        }
      }
    }
  }

  // 获取样式的值
  DragFun.prototype.getStyles = function(elem,prop){
    if(window.getComputedStyle){  // 判断是否支持，ie不支持
      if(prop){
        return window.getComputedStyle(elem,null)[prop]  // 判断是否有属性，如果有，返回属性值
      }else{
        return window.getComputedStyle(elem,null)  // 否则返回全部属性
      }
    }else{
      if(prop){
        return elem.currentStyle[prop]
      }else{
        return elem.currentStyle
      }
    }
  }
  window.DragFun = DragFun
}())